<template>
  <div class="hc-pop" v-if="popenevTVisible">
    <el-dialog v-dialogDrag v-if="popenevTVisible && popType == 'dialog'" :class="config.className" :title="config.modalTitle || modalTitle" :visible.sync="popenevTVisible" :close-on-click-modal="closeOnClickModal" :width="config.width ? config.width : formType ? '60%' : '80%'" :top="config.top ? config.top : '6vh'">
      <!-- 表单 -->
      <el-scrollbar v-if="moduleName && formType" class="scroll-Y" :style="{ height:config.height }">
        <div class="scroll-box">
          <HCPage ref="HCForm" :disabled="disabled" :isDialog="true" :parent-obj="popObj"/>
        </div>
      </el-scrollbar>
      <!-- 视图 -->
      <el-scrollbar v-if="moduleName && viewType" class="scroll-Y" :style="{ height:config.height }">
        <div class="custom-view">
          <HCView ref="HCView" tableHeightType="auto" :checkBox="checkBox" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
      </el-scrollbar>
      <!-- Fs容器 -->
      <el-scrollbar v-if="moduleName && containerKey" class="scroll-Y" :style="{backgroundColor: '#F5F5F5',height:config.height}">
        <div :style="{height:config.height}">
          <HCFsContainer ref="HCFsContainer" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
      </el-scrollbar>
      <!-- Fs表单容器 -->
      <el-scrollbar v-if="moduleName && containerFormKey" class="scroll-Y" :style="{backgroundColor: '#F5F5F5',height:config.height}">
        <div :style="{height:config.height}">
          <HCFormContainer ref="HCFormContainer" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
      </el-scrollbar>
      <!-- tab -->
      <div v-if="moduleName && tabKey">
        <HCTabView ref="HCTabView" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
      </div>
      <div v-if="hasFotter && buttonList.length == 0" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="popHandleClick">确定</el-button>
        <el-button @click="popHandleCancel">取 消</el-button>
      </div>
      <div v-else slot="footer" class="dialog-footer">
        <el-button v-for="(preButton,index) in buttonList" :key="index" :type="preButton.btnStyle || 'primary'" @click="popHandleClick(preButton)">{{preButton.btnTitle}}</el-button>
        <el-button @click="popHandleCancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-drawer v-if="popenevTVisible && popType == 'drawer'" :wrapper-closable="closeOnClickModal" :visible.sync="popenevTVisible" :title="config.modalTitle || modalTitle" :size="config.width ? config.width : formType ? '60%' : '80%'">
      <el-scrollbar class="scroll-Y-drawer" :style="{ height:config.height }">
        <div class="scroll-box" v-if="moduleName && formType">
          <HCPage ref="HCForm" :disabled="disabled" :isDialog="true" :parent-obj="popObj"/>
        </div>
        <div class="scroll-box" v-if="moduleName && viewType">
          <HCView ref="HCView" tableHeightType="auto" :checkBox="checkBox" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
        <div class="scroll-box" v-if="moduleName && tabKey">
          <HCTabView ref="HCTabView" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
        <div class="scroll-box" v-if="moduleName && containerKey">
          <HCFsContainer ref="HCFsContainer" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
        <div class="scroll-box" v-if="moduleName && containerFormKey">
          <HCFormContainer ref="HCFormContainer" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
        </div>
      </el-scrollbar>
      <!-- <div v-if="moduleName && viewType" class="custom-view">
        <HCView ref="HCView" tableHeightType="auto" :checkBox="checkBox" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
      </div>
      <div v-if="moduleName && tabKey" class="custom-view">
        <HCTabView ref="HCTabView" :viewConfig="config.viewConfig" :parent-obj="popObj"/>
      </div> -->
      <div v-if="hasFotter && buttonList.length == 0" class="dialog-footer hc-drawer-btn">
        <el-button type="primary" @click="popHandleClick">确定</el-button>
        <el-button @click="popHandleCancel">取 消</el-button>
      </div>
      <div v-else class="dialog-footer hc-drawer-btn">
        <el-button v-for="(preButton,index) in buttonList" :key="index" :type="preButton.btnStyle || 'primary'" @click="popHandleClick(preButton)">{{preButton.btnTitle}}</el-button>
        <el-button @click="popHandleCancel">取 消</el-button>
      </div>
    </el-drawer>
  </div>

</template>

<script>
import HCView from "../../HCView";
import HCPage from "../../HCPage";
import HCTabView from "../../HCTabView";
import { checkForm } from "../../utils/index";
import { viewConfig } from "@/utils/coreConfig";
import { clickEvent, combineRecord } from "../../event/eventClick";
import HCFsContainer from "../../HCFsContainer";
import HCFormContainer from "../../HCFormContainer";
export default {
  name: "popEvent",
  data()
  {
    return {
      tabKey: null,
      viewKey: null,
      moduleName: null,
      viewType: null,
      checkBox: null,
      paramsMap: {},
      queryMap: {},
      formType: null,
      formParams: {},
      containerKey: null,
      containerFormKey: null,
      containerParams: null,
      currentKey: null,
      promiseStatus: null,
      unid: 0,
      // 弹窗组件配置信息
      config: {
        // 视图配置
        viewConfig: viewConfig,
        // 父级组件对象
        parentObj: null,
        // 父级组件数据记录
        parentRecord: null,
        // 弹窗事件本身
        cEvent: null,
        // 是否点击按钮自动关闭弹窗
        autoClose: false,
      },
      modalTitle: "",
      confirmLoading: false,
      popenevTVisible: true,
      hasFotter: true,
      disabled: false,
      popType: '',  // 弹窗打开方式，drawer: 右侧抽屉打开  dialog: 弹框打开
      // 自定义按钮集合
      buttonList: [],
      // 点击遮罩层是否关闭弹窗
      closeOnClickModal: false,
      // 弹窗对象
      popObj: {
        destroyElement: this.destroyElement,
        _this: this,
        config: {}
      },
    };
  },
  components: {
    HCPage,
    HCView,
    HCFsContainer,
    HCFormContainer,
    HCTabView
  },
  watch: {
    "$route.path": function (newVal, oldVal)
    {
      if (this.promiseStatus)
      {
        this.promiseStatus.reject();
      }
      this.destroyElement();
    },
  },
  methods: {
    show(data, config)
    {
      console.log(data, config, "==================cs");
      this.closeOnClickModal = window.HC_config.VUE_APP_CLOSE_MASK || config.closeMask || data.closeMask || false;

      this.hasFotter = config.hasFotter ? config.hasFooter ? config.hasFooter : true : false;
      this.viewKey = data.viewKey || data.viewkey || data.key || null;
      this.moduleName = data.moduleName || data.modulename || null;
      this.viewType = data.viewType || data.viewtype || null;
      this.tabKey = data.tabKey || data.tabkey || null;
      this.checkBox = data.checkBox || null;
      this.unid = data.unid || 0;
      this.paramsMap = data.paramsMap || data.paramsmap || {};
      this.queryMap = data.queryMap || data.querymap || {};
      this.formType = data.formType || data.formtype || null;
      this.formParams = data.formParams || data.formparams || {};
      this.tabParams = data.tabParams || data.tabparams || {};
      this.containerKey = data.containerKey || data.containerkey || null;
      this.containerFormKey = data.containerFormKey || data.containerformkey || null;
      this.containerParams = data.containerParams || data.containerparams || null;
      this.currentKey = data.currentKey || data.currentkey || null;
      this.modalTitle = data.modalTitle || "";
      this.popType = data.popType || 'dialog';

      this.config.isShowButton = data.isShowButton || true;
      this.config.showSearch = true;
      this.config.top = config.top || '15vh';
      this.config.bottom = config.bottom || '15vh';
      this.config.width = config.width;
      // 弹窗确定按钮回调事件
      this.config.cEvent = config.cEvent || null;
      // 弹窗父级组件数据记录
      this.config.parentRecord = config.parentRecord || null;
      // 弹窗父级组件元素
      this.config.parentObj = config.parentObj || null;
      // 弹窗样式类名
      this.config.className = config.className || '';
      // 是否点击按钮自动关闭弹窗
      this.config.autoClose = config.autoClose || false;
      if (data.popType == 'drawer')
      {
        this.config.height = config.height || 'calc(100% - 46px)';
      }
      else
      {
        this.config.height = config.height || '500px';
      }
      if (config.buttonList instanceof Array && config.buttonList.length != 0)
      {
        this.buttonList = config.buttonList;
      }

      if (data.disabled == "false")
      {
        this.disabled = false;
      }
      else
      {
        this.disabled = Boolean(data.disabled) || false;
      }

      console.log(this.config,"=========弹窗配置");
      this.popObj.config= this.config || {};
      this.$nextTick(() =>
      {
        if (this.formType)
        {
          console.log(this);
          // 初始化表单
          this.$refs.HCForm.getFormData(
            this.unid,
            this.moduleName,
            this.formType,
            this.formParams
          );
        }
        else if (this.viewType)
        {
          //初始化视图
          this.$refs.HCView.getViewData(
            false,
            this.viewKey,
            this.moduleName,
            this.viewType,
            this.paramsMap,
            this.queryMap
          );
        }
        else if (this.containerKey)
        {
          //初始化容器
          this.$refs.HCFsContainer.getContainerData(
            {
              unid: this.unid,
              modulename: this.moduleName,
              containerKey: this.containerKey,
              currentKey: this.currentKey,
              containerParams: this.containerParams,
            },
            this.queryMap
          );
        }
        else if (this.tabKey)
        {
          console.log(this.tabKey);
          //初始化tab
          this.$refs.HCTabView.getViewData(this.unid, this.moduleName, this.tabKey, this.tabParams);
        }
        else if (this.containerFormKey)
        {
          //初始化容器表单
          this.$refs.HCFormContainer.getContainerData(
            {
              unid: this.unid,
              modulename: this.moduleName,
              containerKey: this.containerFormKey,
              currentKey: this.currentKey,
              containerParams: this.containerParams,
              disabled: this.disabled,
            }
          );
        }
      });

      if (this.config.autoClose)
      {
        // 创建promise
        return new Promise((resolve, reject) =>
        {
          this.promiseStatus = {
            resolve,
            reject,
          };
        });
      }
    },
    /**
     * 确定
     */
    popHandleClick(P_Button)
    {
      let curEvent = null;
      let parentObj = this.config.parentObj;
      let autoClose = this.config.autoClose;
      if (P_Button && P_Button.btnEvent)
      {
        curEvent = P_Button.btnEvent;
      }


      //表单校验
      if (this.formType)
      {
        let otherObj = this.$refs.HCForm.getOtherObj();
        //需要做表单检验
        let isRule = checkForm(
          {
            fieldsList: otherObj.fieldsList,
            formParam: this.$refs.HCForm.getFormBodyData(),
          },
          {
            subList: otherObj.subList || [],
            subListData: this.$refs.HCForm.getFormBodyData().subListData || [],
          },
          otherObj.attachmentList,
          otherObj.notionCmpList
        );
        if (!isRule)
        {
          //验证不通过,中断请求
          return;
        }
      }

      if (autoClose)
      {
        // 触发组件事件
        if (this.viewType)
        {
          this.promiseStatus.resolve({
            choiceList: this.$refs.HCView.getSelectData(),
            otherObj: {
              ...this.$refs.HCView.otherObj,
              parentObj: parentObj,
            },
            event: curEvent,
            paramsMap: this.paramsMap,
          });
        }
        else if (this.formType)
        {
          this.promiseStatus.resolve({
            formData: this.$refs.HCForm.getFormBodyData(),
            otherObj: {
              ...this.$refs.HCForm.getOtherObj(),
              parentObj: parentObj,
            },
            event: curEvent,
            // formParams: this.formParams
          });
        }
        else if (this.containerKey)
        {

          if (this.$refs.HCFsContainer.$refs.HCform)
          {
            this.promiseStatus.resolve({
              formData: this.$refs.HCFsContainer.$refs.HCform.getFormBodyData(),
              otherObj: {
                ...this.$refs.HCFsContainer.$refs.HCform.getOtherObj(),
                parentObj: parentObj,
              },
              event: curEvent
            });
          }
          else if (this.$refs.HCFsContainer.$refs.HCView)
          {
            this.promiseStatus.resolve({
              choiceList: this.$refs.HCFsContainer.$refs.HCView.getSelectData(),
              otherObj: {
                ...this.$refs.HCFsContainer.$refs.HCView.otherObj,
                parentObj: parentObj,
              },
              event: curEvent,
              containerParams: this.containerParams,
            });
          }

        }
        else if (this.containerFormKey)
        {
          if (this.$refs.HCFormContainer.$refs.HCPage)
          {
            this.promiseStatus.resolve({
              formData: this.$refs.HCFormContainer.$refs.HCPage.getFormBodyData(),
              otherObj: {
                ...this.$refs.HCFormContainer.$refs.HCPage.getOtherObj(),
                parentObj: parentObj,
              },
              event: curEvent
            });
          }
        }
        this.destroyElement();
      }
      else
      {
        // 触发组件事件
        if (this.viewType)
        {
          this.popClickEvent({
            choiceList: this.$refs.HCView.getSelectData(),
            otherObj: {
              ...this.$refs.HCView.otherObj,
              parentObj: parentObj,
              popObj: this.popObj,
            },
            event: curEvent,
            paramsMap: this.paramsMap,
            btnObj: P_Button
          });
        }
        else if (this.formType)
        {
          this.popClickEvent({
            formData: this.$refs.HCForm.getFormBodyData(),
            otherObj: {
              ...this.$refs.HCForm.getOtherObj(),
              parentObj: parentObj,
              popObj: this.popObj,
            },
            event: curEvent,
            btnObj: P_Button
            // formParams: this.formParams
          });
        }
        else if (this.containerKey)
        {
          if (this.$refs.HCFsContainer.$refs.HCform)
          {
            this.popClickEvent({
              formData: this.$refs.HCFsContainer.$refs.HCform.getFormBodyData(),
              otherObj: {
                ...this.$refs.HCFsContainer.$refs.HCform.getOtherObj(),
                parentObj: parentObj,
                popObj: this.popObj,
              },
              event: curEvent,
              btnObj: P_Button
            });
          }
          else if (this.$refs.HCFsContainer.$refs.HCView)
          {
            this.popClickEvent({
              choiceList: this.$refs.HCFsContainer.$refs.HCView.getSelectData(),
              otherObj: {
                ...this.$refs.HCFsContainer.$refs.HCView.otherObj,
                parentObj: parentObj,
                popObj: this.popObj,
              },
              event: curEvent,
              containerParams: this.containerParams,
              btnObj: P_Button
            });
          }

        }
        else if (this.containerFormKey)
        {
          if (this.$refs.HCFormContainer.$refs.HCPage)
          {
            this.popClickEvent({
              formData: this.$refs.HCFormContainer.$refs.HCPage.getFormBodyData(),
              otherObj: {
                ...this.$refs.HCFormContainer.$refs.HCPage.getOtherObj(),
                parentObj: parentObj,
                popObj: this.popObj,
              },
              event: curEvent,
              btnObj: P_Button
            });
          }
        }
      }
    },
    /**
     * 取消
     */
    popHandleCancel()
    {
      if (this.config.autoClose)
      {
        this.promiseStatus.reject();
      }
      this.destroyElement();
    },
    /**
     * cs 2022-4-8
     * 销毁组件
     */
    destroyElement()
    {
      this.popenevTVisible = false;
    },
    /**
     * 弹窗按钮点击事件
     * @param popCallObj
     */
    popClickEvent(popCallObj)
    {
      let parentRecord = this.config.parentRecord;
      let cEvent = this.config.cEvent;
      let btnObj = popCallObj.btnObj;
      let otherObj = popCallObj.otherObj;

      //给回调事件的数据
      let callRecord;
      if (popCallObj.choiceList)
      {
        //视图选择数据
        callRecord = popCallObj.choiceList;
      } else if (popCallObj.formData)
      {
        callRecord = popCallObj.formData;
        //弹出表单修改 otherObj
        otherObj = { ...otherObj, ...popCallObj.otherObj }
      }
      if (popCallObj.containerParams || popCallObj.paramsMap || popCallObj.formParams)
      {
        otherObj.callParams = popCallObj.containerParams || popCallObj.paramsMap || popCallObj.formParams;
      }
      let curEvent;
      if (popCallObj.event)
      {
        curEvent = popCallObj.event;
      }

      let newRecord = combineRecord(callRecord, parentRecord);

      if (btnObj.checkedNumberBeforeClick)
      {
        if (newRecord.constructor === Array)
        {
          if (newRecord.length < btnObj.checkedNumberBeforeClick)
          {
            this.$message.warning("请至少勾选" + btnObj.checkedNumberBeforeClick + "项");
            return
          }
        }
      }

      if (curEvent && !cEvent.callback)
      {
        //执行回调事件
        clickEvent({ btnEvent: curEvent }, newRecord, otherObj);
      }
      else if (cEvent?.callback)
      {
        //执行回调事件
        clickEvent({ btnEvent: cEvent.callback }, newRecord, otherObj);
      }
      //兼容旧的写法 2022-9-21 chenshuai
      let changeList = [];
      if (cEvent?.params)
      {
        for (let k in cEvent.params)
        {
          let preParasItem = cEvent.params[k];
          if (preParasItem && preParasItem.indexOf("@") > -1)
          {
            changeList.push({
              value: preParasItem,
              fieldName: k
            })
          }
        }

        //前端构造改变控件事件
        if (changeList.length > 0)
        {
          let callback = {
            callback: null,
            callbackParams: null,
            eventActions: null,
            eventName: null,
            eventProps: changeList,
            eventTargets: null,
            eventType: "CONTROL_EVENT",
            methodName: null,
            subModuleEvent: null,
          }
          clickEvent({ btnEvent: callback },
            newRecord,
            otherObj
          );
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.hc-modal {
  position: absolute;
  min-width: 400px;
  min-height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
  .hc-modal-head {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    align-content: space-between;
  }
}

.scroll-Y {
  width: 100%;
  height: 500px;
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .el-scrollbar__view {
    width: var(--width);
  }
  .scroll-box {
    padding: 0 10px;
  }
}
.scroll-Y-drawer {
  width: 100%;
  height: calc(100% - 46px);
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .scroll-box {
    padding: 10px;
  }
}
.custom-view {
  padding: 0 10px;
}
.hc-drawer-btn {
  /*text-align: center !important;*/
  /*margin: 30px 0 0 0;*/
  position: absolute;
  bottom: 0;
  /*left: 50%;
  transform: translate(-50%, -20%);*/
  width: 100%;
  text-align: center;
  z-index: 999;
  background-color: white;
  padding-bottom: 10px;
}

::v-deep .hc-view {
  &.height-fiexed {
    &.hasTagsView {
      height: auto;
    }
  }
}
</style>
